<!--Recommended Users-->
		<div class="container" id="recommended_users">
		    <h2 class="container_head">Recommended People</h2>
            <ul class="rec_users" style="padding: 0px; margin: 0px;">
		          <!--User 01-->
                  <li class="rec_user" style="list-style: none; padding: 0.3em; position: relative;">
			          <img src="images/ForeverNAlwaysILY.64.432910.jpg" alt="ForeverNAlwaysILY" align="top" class="picframe" border="0" width="64" height="64" />
			          <div style="display:inline-block; padding:0.3em; vertical-align: middle; width: 45%;">
				            <a href="/user/ForeverNAlwaysILY?ref=rec" class="tip" onclick="ga_track('Recommendations', 'User', 'Click');" style="font-weight: bold; line-height: 1.5em;" title="ForeverNAlwaysILY">ForeverNAlwaysILY</a>
                       <br/><span></span>
			         </div>
                     <img src='images/delete_overlay.png' width='14' height='14' alt='Dismiss' class='dismiss' title='Dismiss' style='cursor: pointer; display: none; float: right'  />
			         <button class="b2 medium white" data-name="ForeverNAlwaysILY" style="position: absolute; top:50%; left: 75%; margin-left: -0.4em; margin-top:-0.8em; width: 75px;">
				        Fan	
                     </button>
		          </li>
                  <!--User 02-->
		          <li class="rec_user" style="list-style: none; padding: 0.3em; position: relative;">
			          <img src="images/4.64.jpg" alt="grumpysara" align="top" class="picframe" border="0" width="64" height="64" />
			          <div style="display:inline-block; padding:0.3em; vertical-align: middle; width: 45%;">
				        <a href="/user/grumpysara?ref=rec" class="tip" onclick="ga_track('Recommendations', 'User', 'Click');" style="font-weight: bold; line-height: 1.5em;" title="grumpysara">grumpysara</a>
				        <br/>
				        <span></span>
			         </div>
			         <img src='images/delete_overlay.png' width='14' height='14' alt='Dismiss' class='dismiss' title='Dismiss' style='cursor: pointer; display: none; float: right'  />
			         <button class="b2 medium white" data-name="grumpysara" style="position: absolute; top:50%; left: 75%; margin-left: -0.4em; margin-top:-0.8em; width: 75px;">
				        Fan			
                    </button>
		         </li>
                 <!--User 03-->
	             <li class="rec_user" style="list-style: none; padding: 0.3em; position: relative;">
			          <img src="images/FlyingOrangePeels.64.346240.jpg" alt="FlyingOrangePeels" align="top" class="picframe" border="0" width="64" height="64" />
			          <div style="display:inline-block; padding:0.3em; vertical-align: middle; width: 45%;">
				        <a href="/user/FlyingOrangePeels?ref=rec" class="tip" onclick="ga_track('Recommendations', 'User', 'Click');" style="font-weight: bold; line-height: 1.5em;" title="FlyingOrangePeels">FlyingOrangePeels</a>
				        <br/>
				        <span></span>
			         </div>
			         <img src='images/delete_overlay.png' width='14' height='14' alt='Dismiss' class='dismiss' title='Dismiss' style='cursor: pointer; display: none; float: right'  />
			         <button class="b2 medium white" data-name="FlyingOrangePeels" style="position: absolute; top:50%; left: 75%; margin-left: -0.4em; margin-top:-0.8em; width: 75px;">
				        Fan			
                    </button>
		         </li>
                 <!--User 04-->
		          <li class="rec_user" style="list-style: none; padding: 0.3em; position: relative;display: none;">
			          <img src="images/Deeplyinlove25.64.751287.jpg" alt="Deeplyinlove25" align="top" class="picframe" border="0" width="64" height="64" />
			          <div style="display:inline-block; padding:0.3em; vertical-align: middle; width: 45%;">
				         <a href="/user/Deeplyinlove25?ref=rec" class="tip" onclick="ga_track('Recommendations', 'User', 'Click');" style="font-weight: bold; line-height: 1.5em;" title="Deeplyinlove25">Deeplyinlove25</a>
			         	<br/>
				        <span></span>
			         </div>
			         <img src='images/delete_overlay.png' width='14' height='14' alt='Dismiss' class='dismiss' title='Dismiss' style='cursor: pointer; display: none; float: right'  />
			         <button class="b2 medium white" data-name="Deeplyinlove25" style="position: absolute; top:50%; left: 75%; margin-left: -0.4em; margin-top:-0.8em; width: 75px;">
				        Fan			
                    </button>
		          </li>
                  <!--User 05-->
		          <li class="rec_user" style="list-style: none; padding: 0.3em; position: relative;display: none;">
            			<img src="images/MickeyShapedCupcakes.64.150061.jpg" alt="MickeyShapedCupcakes" align="top" class="picframe" border="0" width="64" height="64" />
            			<div style="display:inline-block; padding:0.3em; vertical-align: middle; width: 45%;">
            				<a href="/user/MickeyShapedCupcakes?ref=rec" class="tip" onclick="ga_track('Recommendations', 'User', 'Click');" style="font-weight: bold; line-height: 1.5em;" title="MickeyShapedCupcakes">MickeyShapedCupcakes</a>
            				<br/>
            				<span></span>
            			</div>
            			<img src='images/delete_overlay.png' width='14' height='14' alt='Dismiss' class='dismiss' title='Dismiss' style='cursor: pointer; display: none; float: right'  />
            			<button class="b2 medium white" data-name="MickeyShapedCupcakes" style="position: absolute; top:50%; left: 75%; margin-left: -0.4em; margin-top:-0.8em; width: 75px;">
            				Fan			
                        </button>
		          </li>
			</ul>

	       <script type="text/javascript">
		      var MAX_RECOMMENDATIONS_VISIBLE = 3;
		      function fanFriends(ele, names) {
    			$.ajax({
    				type: 'POST',
    				url: API2_PATH+'userfans',
    				data: {
    				 'action': 'add',
    				 'name': names.join(','),
    				},
    				dataType: 'json',
    				success: function (data) {
    				 ga_track('Recommendations', 'User', 'Fan - Home', 1);
    
    				 ele.unbind().removeClass('white').addClass('green').html('Fanned');
    
    				 setTimeout(function () {
    					 refreshRecommendations(ele.parent())
    				 }, 850);
    				}
    			});
    		}

		    function refreshRecommendations(ele) {
    			ele.fadeOut(function () {
    				// Remove current user recommendation
    				ele.remove();
    
    				// Loads new recommendation only if less than 3 user recommendations are visible
    				if ($('.rec_user:visible').length<MAX_RECOMMENDATIONS_VISIBLE && $('.rec_user:hidden').length) {
    					$('.rec_user:hidden:first').fadeIn();
    				}
    
    				// Remove container if no additional user recommendations are available
    				if (!$('.rec_user:visible').length) {
    					$('.rec_users').parents('.container').fadeOut('slow', function () {
    						$(this).remove();
    					});
    				}
    			});
  		   }

    		$(document).ready(function () {
    			$('.rec_user').hover(
    				function () {
    					$(this).css('background-color', '#F2F2F2');
    					$(this).children('.dismiss').show();
    				},
    				function () {
    					$(this).css('background-color', '');
    					$(this).children('.dismiss').hide();
    				}
    			);
    
    			$('.rec_user .dismiss').click(function () {
    				refreshRecommendations($(this).parent());
    			});
    
    			$('.rec_user button').click(function () {
    				fanFriends($(this), [$(this).data('name')])
    			});
    		});
    	</script>
        </div>
        <!-- End Container-->